<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>SF轻小说-全国最大的轻小说网站</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>
		
		<!-- Bootstrap -->
		<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="${pageContext.request.contextPath }/js/jquery-1.11.0.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
        <link href="${pageContext.request.contextPath }/css/shopping.css" rel="stylesheet"/>
		<script>
			/*增加或删除数量*/
			function sub(psid) {
			    if (psid.value > 0) {
			        if (psid.value == 1) {
			            alert("已到达最小数量！");
			            return;
			        }
			    	psid.value = psid.value-1;
			 		var a = psid.value;
			   		var c = $(psid).parent().parent().parent().parent().find(".pice")[0].innerHTML;
			    	var b = $(psid).parent().parent().parent().parent().find(".price")[0].innerHTML=a*c;
			    	$(".cot").innerHTML=b;
			    	
			    } else {
			        alert("请输入有效数量！");
			    }
			}
			
			function plus(psid) {
			    if (psid.value > 0) {
			    	psid.value = +psid.value+1;
			    	var a = psid.value;
			    	var c = $(psid).parent().parent().parent().parent().find(".pice")[0].innerHTML;
			    	var b = $(psid).parent().parent().parent().parent().find(".price")[0].innerHTML=a*c;
			    } else {
			        alert("请输入有效数量！");
			    }
			}
			
			function yzquantity(psid) {
			    var yzquantity = $(".yzquantity" + psid).val();
			    var reg = /^[0-9]*$/;
			    reg.test(yzquantity);
			    if (reg.test(yzquantity) == false) {
			        alert("请输入有效数量！");
			        $(".yzquantity" + psid).val(yzquantity);
			    }
			}
			 // 复选框的全选和全不选
		    $(function() {
		        // 获得全部面的复选框
		        var $selectAll = $("#selectAll");
		        $selectAll.click(function() {
		            // alert($selectAll.prop("checked"));
		            if ($selectAll.prop("checked") == true) {
		                // 复选框已被选中
		                $(":checkbox[name='ids']").prop("checked", true);
		                aa();
		            } else {
		                // 复选框没被选中
		                $(":checkbox[name='ids']").prop("checked", false);
		                $("#bb").text(0);
		            }
		        });
		    });
			 function aa() {
				 var a =0;
				$("input[name='ids']:checked").parent().parent().parent().parent().find(".price").each(function (index,value) {
					a += +value.innerHTML;
				});
				$("#bb").text(a);
			}
			 
		</script>
	</head>
	<body>
		<div class="container">
			<div class="row" id="a">
				<div class="col-lg-1"></div>
				<div class="col-lg-3">
					<div class="a1">
						<img src="${pageContext.request.contextPath }/images/goods/logo.png"/>
					</div>
				</div>
				<div class="col-lg-5"></div>
				<div class="col-lg-3">
					<div class="a_1">
						<a href="${pageContext.request.contextPath }/vipServlet">个人中心</a> | <a href="${pageContext.request.contextPath }/showShopService">我的订单</a><br/>
						[ <span class="name"><a href="${pageContext.request.contextPath }/page/login1.jsp">登录</a></span> ] | [ <a href="${pageContext.request.contextPath }/page/login2.jsp">免费注册</a> ]
					</div>
				</div>
			</div>
			<div class="row">
				<hr style="border-bottom: 3px solid #F60;"/>
			</div>
			<div class="row" id="b">
				<div class="col-lg-1"></div>
				<div class="col-lg-10">
					<div class="b_1">
						您当前位置：<a href="${pageContext.request.contextPath }/index.jsp">首页</a> >> 购物车
					</div>
				</div>
				<div class="col-lg-1"></div>
			</div>
			<div class="row" id="c">
				<div class="col-lg-1"></div>
				<div class="c_1 col-lg-2"><img src="${pageContext.request.contextPath }/images/goods/cart_logo.jpg"/></div>
				<div class="col-lg-8">
					<div class="c_2">
						<div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
							<ul id="myTabs" class="nav nav-tabs" role="tablist">
								<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">1.查看购物车</a>
								<li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">2.填写核对地址信息</a>
								<li role="presentation"><a href="#Submit" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">3.确认订单详情</a>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-lg-1"></div>
			</div>
			
			<div class="row" id="d">
				<div class="col-lg-1"></div>
				<div class="col-lg-10">
					<div id="myTabContent" class="tab-content">
					    <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
					        <div class="d_1">查看我的订单</div>
							<div>
								<table border="1px">
										<tr>
											<td width="100px" align="center"><input type="checkbox" id="selectAll"> 全选</td>
											<td width="15%" align="center">图片</td>
											<td width="25%" align="center">商品名称</td>
											<td width="10%" align="center">单价</td>
											<td width="15%" align="center">数量</td>
											<td width="10%" align="center">小计</td>
											<td width="15%" align="center">操作</td>
										</tr>
									<c:forEach items="${carts}" var="carts" varStatus="status">
										<tr>
											<td>
												<div class="d_2_1">
													<input type="checkbox" name="ids" onclick="aa()"/>
												</div>
											</td>
											<td align="center">
												<div class="d_3" align="center">
													<img src="${pageContext.request.contextPath }/${carts.image}"/>
												</div>
											</td>
											<td align="center">
												<div class="d_2" align="center"><font id="goodsname">${carts.name }</font></div>
											</td>
											<td align="center">
												<div class="d_2" align="center">￥：<font class="pice">${carts.price }</font></div>
											</td>
											<td align="center">
												<div class="d_2" align="center">
													<div class="plussub">
														<span onclick="sub(num${status.index })" class="sub">-</span>
														<input class="yzquantity1" onblur="yzquantity(1)" type="text" value="${carts.nums }" id="num${status.index }" >
														<span onclick="plus(num${status.index })" class="plus">+</span>
													</div>
												</div>
											</td>
											<td align="center">
												<div class="d_2" align="center">￥：<font class="price">${carts.nums * carts.price}</font></div>
											</td>
											<td align="center">
												<div class="d_2" align="center">
													<a class="btn btn-default" href="#" role="button">删除</a>
												</div>
											</td>
										</tr>
									</c:forEach>

									</table>
									<div>
										<div class="d_4">金额总计(不包含运费)：￥<font style="color: red;" id="bb">0.00</font></div>
									</div>
									<div style="clear: right;">
										<div class="d_5">
												<a href="${pageContext.request.contextPath }/index.jsp" class="btn btn-info btn-lg active btn-sm" role="button">继续购物</a>
											<button type="button" class="btn btn-default" id="bt_sure">确认购买</button>
										</div>
									</div>
							</div>
						</div>
					    <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
							<div>
								<div class="d_8">核对订单信息</div>
								<div><hr style="border-bottom: 3px solid #F60;"/></div>
								<div class="d_9">收货人信息</div>
								<div><hr style="border-bottom: 2px solid #F60;"/></div>
								<div class="d_10">
									<table border="1px" width="600px">
										<caption>常用收货地址</caption>
										<c:forEach items="${carts }" var="carts" end="0">
											<tr>
												<td width="100px" align="center"><input type="radio" name="rideo" checked="checked"/> ${carts.username }</td>
												<td width="200px" align="center">${carts.telphone }</td>
												<td width="300px" align="center">${carts.province}${carts.city}${carts.area}${carts.address }</td>
											</tr>
										</c:forEach>
									</table>
								</div>
								<div><hr style="border-bottom: 3px solid #F60;"/></div>
								<div class="d_11">
									<table border="1px" width="300px">
										<caption>支付方式</caption>
										<tr>
											<td width="100px">
												<div class="d_13">
													<input type="radio" name="paly" checked="checked"/> 支付宝
												</div>
											</td>
											<td width="200px" align="center">支付手续费：￥0.0</td>
										</tr>
										<tr>
											<td align="center"><input type="radio" name="paly"/> 货到付款</td>
											<td align="center">支付手续费：￥0.0</td>
										</tr>
									</table>
								</div>
								<div><hr style="border-bottom: 3px solid #F60;"/></div>
								<div>
									
									<table border="1px" width="900px">
										<caption>购买的商品</caption>
										<tr>
											<td width="15%" align="center">图片</td>
											<td width="55%" align="center">商品名称</td>
											<td width="10%" align="center">单价</td>
											<td width="10%" align="center">数量</td>
											<td width="10%" align="center">小计</td>
										</tr>
										<c:forEach items="${carts}" var="carts">
											<tr>
												<td align="center">
													<div class="d_6">
														<img src="${pageContext.request.contextPath }/${carts.image}"/>
													</div>
												</td>
												<td align="center">${carts.name}</td>
												<td align="center">￥${carts.price}</td>
												<td align="center">${carts.nums}</td>
												<td align="center">￥<font style="color: red;">${carts.nums * carts.price}</font></td>
										</tr>
										</c:forEach>
									</table>
								</div>
							</div>
							<div>
								<div>
									<from>
										<div class="d_12">结算信息</div>
										<div><hr style="border-bottom: 2px solid #F60;"/></div>
										<div>商品总金额：<font class="cot">0.0</font> + 运费总计：0.00</div>
										<div style="float: right;margin-right: 60px;">应付总额：<font style="color: red;font-size: 20px;">￥0.00</font>元</div>
										<div class="d_7">
											<button type="submit" class="btn btn-default" onclick="bbb()">确认无误,提交订单</button>
										</div>
									</from>
								</div>
							</div>
					    </div>
						
						<div role="tabpanel" class="tab-pane fade" id="Submit" aria-labelledby="profile-tab">
							<div class="d_16">成功提交订单</div>
							<div>
								<div class="d_17">
									<img src="${pageContext.request.contextPath }/images/goods/order_4.jpg" />
								</div>
								<div class="d_15">
								<form>
									<table border="1px">
										<caption>订单信息</caption>
										<tr class="d_14">
											<td><div>订单编号：<font style="color: red;">1243434373734</font></div></td>
										</tr>
										<tr class="d_14">
											<td><div>订单金额：<font style="color: red;">￥129</font></div></td>
										</tr>
										<tr class="d_14">
											<td><div>支付方式：支付宝</div></td>
										</tr>
									</table>
									<div class="d_18">
										<button type="submit" class="btn btn-default">立即支付</button>
									</div>
								</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="row" id="e">
				<div class="container">
					<div class="row">
						<hr/>
					</div>
					<div class="row">
						<div class="col-lg-1"></div>
						<div class="col-lg-2 text-center">购物指南<hr style="border: 2px solid pink; width: 170px; background-color: pink;"></div>
						<div class="col-lg-2 text-center">支付帮助<hr style="border: 2px solid pink; width: 170px; background-color: pink;"></div>
						<div class="col-lg-2 text-center">配送帮助<hr style="border: 2px solid pink; width: 170px; background-color: pink;"></div>
						<div class="col-lg-2 text-center">售后服务<hr style="border: 2px solid pink; width: 170px; background-color: pink;"></div>
						<div class="col-lg-2 text-center">帮助信息<hr style="border: 2px solid pink; width: 170px; background-color: pink;"></div>
						<div class="col-lg-1"></div>
					</div>
					<div class="row">
						<div class="col-lg-1"></div>
						<div class="col-lg-2 text-center">＊订单状态</div>
						<div class="col-lg-2 text-center">＊支付帮助</div>
						<div class="col-lg-2 text-center">＊EMS/邮政普包</div>
						<div class="col-lg-2 text-center">＊售后服务</div>
						<div class="col-lg-2 text-center">＊友情链接</div>
						<div class="col-lg-1"></div>
					</div>
					<div class="row">
						<div class="col-lg-1"></div>
						<div class="col-lg-2 text-center">＊购物流程</div>
						<div class="col-lg-2 text-center">＊在线支付</div>
						<div class="col-lg-2 text-center">＊商品验货与签收</div>
						<div class="col-lg-2 text-center">＊发票制度</div>
						<div class="col-lg-2 text-center">＊联系客服</div>
						<div class="col-lg-1"></div>
					</div>
					<div class="row">
						<div class="col-lg-1"></div>
						<div class="col-lg-2 text-center"></div>
						<div class="col-lg-2 text-center">＊货到付款</div>
						<div class="col-lg-2 text-center">＊配送范围及运费</div>
						<div class="col-lg-2 text-center">＊退货说明</div>
						<div class="col-lg-2 text-center">＊找回密码</div>
						<div class="col-lg-1"></div>
					</div>
					<div class="row">
						<div class="col-lg-1"></div>
						<div class="col-lg-2 text-center"></div>
						<div class="col-lg-2 text-center"></div>
						<div class="col-lg-2 text-center"></div>
						<div class="col-lg-2 text-center">＊退货说明</div>
						<div class="col-lg-2 text-center">＊关于我们</div>
						<div class="col-lg-1"></div>
					</div>
				</div>
			</div>
			
			<div class="row" id="g">
				<div class="col-lg-2"></div>
				<div class="col-lg-8 text-center" style="height:35px;">
					<div id="g_1">
						<a href="img.html">免责声明</a> &nbsp;|&nbsp; <a href="img.html">版权隐私</a> &nbsp;|&nbsp; <a href="img.html">联系方式</a> &nbsp;| &nbsp; <a href="img.html">友情链接</a> &nbsp;| &nbsp;
						<a href="img.html">广告投放</a> &nbsp;|&nbsp; <a href="img.html">粤ICP备10062407号</a> &nbsp;|&nbsp; <a href="img.html">免责声明</a>
					</div>
				</div>
				<div class="col-lg-2"></div>
			</div>
			<div class="row" id="g">
				<div class="col-lg-2"></div>
				<div class="col-lg-8 text-center">
					粤文网[2012]0726-109号[c]2005 - 2014 SFACG.COM ALL Rights Reserved
				</div>
				<div class="col-lg-2"></div>
			</div>
		</div>
	</body>
</html>
